<template>
  <div id="result">
    <vue-particles
        class="login-bg"
        color="#39AFFD"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#8DD1FE"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
    ></vue-particles>
    <div style=" width: 80%;margin: 0 auto;">
      <el-row style="height: 80%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="文章" name="first">
            <div>本次搜索共找到{{this.searchNum}}条结果</div>
            <el-link v-if=articleHave style="font-size: 25px" type="primary" @click.native="toHome">未查询到指定文章，换个关键词试试吧！
            </el-link>
            <el-card shadow="hover" v-for="(item) in result" style="margin: 50px;">
              <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}
              </el-link>
              <div>{{ item.authorName }}</div>
              <div style="text-align: right">{{ item.createTime }}</div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="用户" name="second">
            <div>本次搜索共找到{{this.userSearchNum}}条结果</div>
            <el-link v-if=userHave style="font-size: 25px" type="primary" @click.native="toHome">未查询到指定用户，换个关键词试试吧！
            </el-link>
            <el-card shadow="hover" v-for="(item) in user" style="margin: 50px;">
              <div style="float: left;">
                <span><img style="width:70px;height:70px; margin:0 20px 0 0;border-radius: 50%"
                           :src="item.avatarUrl"></span></div>
              <div><span><el-link style="margin:20px 0 10px 0;font-size: 20px" type="primary"
                                  @click.native="toUser(item.id)">{{ item.username }}
              </el-link></span></div>
              <div style="text-align: right">文章数：{{ item.articleNum }}</div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="标签" name="third">
            <div>本次搜索共找到{{this.labelSearchNum}}条结果</div>
            <el-link v-if=labelHave style="font-size: 25px" type="primary" @click.native="toHome">没有该标签的文章，期待您的贡献！
            </el-link>
            <el-card shadow="hover" v-for="(item) in labelResult" style="margin: 50px;">
              <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}
              </el-link>
              <div>{{ item.authorName }}</div>
              <div style="text-align: right">{{ item.createTime }}</div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>

  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "search",
  data() {
    return {
      result: [],
      activeName: 'first',
      user: [],
      labelResult: [],
      userHave: false,
      articleHave: false,
      labelHave: false,
      labelSearchNum:0,
      searchNum:0,
      userSearchNum:0
    }
  },

  created(){
    this.getResult();
    this.getUser();
    this.getLabel();
    window.addEventListener('resize', this.handleResize);
  },
  watch: {
    '$route': 'getAll',
  },

  methods: {
    toHome() {
      this.$router.push({path: '/'})
    },
    getAll() {
      this.userHave = false;
      this.articleHave = false;
      this.labelHave = false;
      this.getResult()
      this.getUser()
      this.getLabel()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getLabel() {
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/searchByLabel',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({
          keyword: this.$store.state.searchInput
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.labelResult = res.data.data
            if(res.data.data!==null) this.labelSearchNum=res.data.data.length
            if (this.labelResult.length === 0)
              this.labelHave = true;
            for (let i in this.labelResult) {
              this.labelResult[i].createTime = this.labelResult[i].createTime.replace(/T/g, " ")
              this.labelResult[i].createTime = this.labelResult[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            this.labelHave = true;
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    getResult() {
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/search',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({
          keyword: this.$store.state.searchInput
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.result = res.data.data
            if(res.data.data!==null) this.searchNum=res.data.data.length
            if (this.result.length === 0)
              this.articleHave = true;
            for (let i in this.result) {
              this.result[i].createTime = this.result[i].createTime.replace(/T/g, " ")
              this.result[i].createTime = this.result[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            this.articleHave = true;
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    getUser() {
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/user/search',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({
          keyword: this.$store.state.searchInput
        })
      })
          .then(res => {/* res 是 response 的缩写 */
            this.user = res.data.data
            if(res.data.data!==null) this.userSearchNum=res.data.data.length
            if (this.user.length === 0)
              this.userHave = true;
            for (let i in this.user) {
              if (this.user[i].avatarUrl === null) this.user[i].avatarUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            }
          })
          .catch(err => {
            this.userHave = true;
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    toUser(id) {
      this.$router.push({path: '/userPage', query: {userID: id}})
    },
    toArticle(id) {
      this.$router.push({path: '/text', query: {passageID: id}})
    },
    handleResize () {
      this.fullHeight = document.documentElement.clientHeight+"px"
    }
  }
}
</script>

<style scoped>
.login-bg {
  width: 95%;
  height: 300%;

}
</style>
